<template>
  <div id="canvas" :style="canvasStyle">
    <div v-for="(item, index) in viewData"
      :key="index" :style="chartStyle(item)" v-show="item.isShow == true">
        <bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-if="item.chartType == 'bar' && item.isShow == true"/>
        <line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'line' && item.isShow == true"/>
        <scatter-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'scatter' && item.isShow == true"/>
        <top-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'topbar' && item.isShow == true"/>       
        <paralle-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'parallebar' && item.isShow == true"/>             
        <double-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'doublebar' && item.isShow == true"/>   
        <doubley-axis-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'doubleyAxis' && item.isShow == true"/>       
        <double-direction-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'doubleDirectionBar' && item.isShow == true"/>       
        <double-bar-time-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'doublebartime' && item.isShow == true"/>              
        <single-column-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'singleColumn' && item.isShow == true"/>       
        <cylinder-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'cylinder' && item.isShow == true"/>       
        <three-d-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'threeDBar'"/> 
        <staggered-label-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'staggeredLabel' && item.isShow == true"/>
        <rate-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'rateBar' && item.isShow == true"/>
        <normal-text :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'text' && item.isShow == true"/>
        <date-text :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'date' && item.isShow == true"/>
        <image-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'img' && item.isShow == true"/>
        <q-rcode-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'qRcode' && item.isShow == true"/>
        <video-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'video' && item.isShow == true"/>       
        <realtime-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'realtime' && item.isShow == true"/>       
        <hyper-link-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :zIndex="item.zindex" v-else-if="item.chartType == 'hyperlink' && item.isShow == true"/>              
        <iframe-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :zIndex="item.zindex" v-else-if="item.chartType == 'iframe' && item.isShow == true"/>         
        <rotation-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :zIndex="item.zindex" v-else-if="item.chartType == 'rotation' && item.isShow == true"/>              
        <color-block-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'colorBlock' && item.isShow == true"/>
        <word-cloud-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'wordcloud' && item.isShow == true"/>
        <twinkle-border-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'twinkleborder' && item.isShow == true"/>
        <around-border-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'aroundborder' && item.isShow == true"/>
        <ray-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'ray' && item.isShow == true"/>
        <midi-keyboard-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'midikeyboard' && item.isShow == true"/>       
        <voiceprint-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'voiceprint' && item.isShow == true"/>       
        <diffuseray-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'diffuseray' && item.isShow == true"/>
        <table-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'taBle' && item.isShow == true"/>
        <table-rotation-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'tablerotation' && item.isShow == true"/>
        <table-top-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'tabletop' && item.isShow == true"/>        
        <handson-table-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'handsontable' && item.isShow == true"/>
        <input-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'input' && item.isShow == true"/>
        <time-frame-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'timeframe' && item.isShow == true"/>       
        <timeline-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'timeline' && item.isShow == true"/>              
        <cascade-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'cascade' && item.isShow == true"/>        
        <tab-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'tab' && item.isShow == true"/>
        <pie-line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'pieline' && item.isShow == true"/>
        <bar-pie-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'barPie' && item.isShow == true"/>
        <line-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'linebar' && item.isShow == true"/>
        <map-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'mapbar' && item.isShow == true"/>
        <stacked-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'stackedBar' && item.isShow == true"/>
        <shadow-line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'shadowLine' && item.isShow == true"/>
        <rain-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'rain' && item.isShow == true"/>
        <pie-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'pie' && item.isShow == true"/>
        <ring-pie-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'ringPie' && item.isShow == true"/>
        <funnel-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'funnel' && item.isShow == true"/>
        <radar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'radar' && item.isShow == true"/>
        <gauge-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'gauge' && item.isShow == true"/>
        <keygauge-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'keygauge' && item.isShow == true"/>
        <progress-gauge-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'progauge' && item.isShow == true"/>      
        <select-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'select' && item.isShow == true"/>
        <lamp-text :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'lamp' && item.isShow == true"></lamp-text>
        <backborder-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'backborder' && item.isShow == true"/>
        <map-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'map' && item.isShow == true"/>
        <map-line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'mapline' && item.isShow == true"/>
        <map-more-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'mapMore' && item.isShow == true"/>
        <three-d-map-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'threedMap' && item.isShow == true"/>      
        <three-d-map-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'threedMapBar' && item.isShow == true"/>      
        <water-ball-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'waterball' && item.isShow == true"/>
        <water-ball-line-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'waterballline' && item.isShow == true"/>
        <flop-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'flop' && item.isShow == true"/>
        <circle-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'circle' && item.isShow == true"/>
        <pie-more-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'piemore' && item.isShow == true"/>
        <progress-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'progress' && item.isShow == true"/>
        <knowledge-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'knowledge' && item.isShow == true"/>
        <pops-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'pops' && item.isShow == true"/>
        <sunburst-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'sunburst' && item.isShow == true"/>
        <text-check-box :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'textCheckBox' && item.isShow == true"/>
        <custom-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'customChart' && item.isShow == true"/>
        <custom-water-ball-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'customWaterBall' && item.isShow == true"/>
        <scanning-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'scanning' && item.isShow == true"/>
        <turntable-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" v-else-if="item.chartType == 'turntable' && item.isShow == true"/>
        <boxline-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'boxline' && item.isShow == true"/>
        <galaxy-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :customId="item.customId" v-else-if="item.chartType == 'galaxy' && item.isShow == true"/>
        <tian-di-map-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :customId="item.customId" v-else-if="item.chartType == 'tiandiMap' && item.isShow == true"/>
        <card-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'card' && item.isShow == true" />
        <pictorial-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'pictorialBar' && item.isShow == true"/>
        <sankey-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'sankey' && item.isShow == true"/>
        <heatMap-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'heatMap' && item.isShow == true"/>
        <tree-layout-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'relationGraph' && item.isShow == true" />
        <custom-threeD-bar-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'CustomThreeDBar' && item.isShow == true"/>
        <interact-chart :width="item.width + 'px'" :height="item.height + 'px'" :chartOption="item.chartOption" :className="item.chartOption.animate" :drawingList="viewData" v-else-if="item.chartType == 'interact' && item.isShow == true" :pageState="'view'"/>

    
    
    </div>

    <drill-down-view :drillDownDialogFlag.sync="drillDownDialogFlag" :drillDownDialogData="drillDownDialogData"/>

  </div>
</template>

<script>

// 水印
import Watermark from './util/watermark'
import './animate/animate.css'
import VueEvent from '@/views/tool/datav/VueEvent'
import BarChart from './components/chart/BarChart'
import LineChart from './components/chart/LineChart'
import ScatterChart from './components/chart/ScatterChart'
import StaggeredLabelChart from './components/chart/StaggeredLabelChart'
import DoubleBarChart from './components/chart/DoubleBarChart'
import TopBarChart from './components/chart/TopBarChart'
import ParalleBarChart from './components/chart/ParalleBarChart'
import DoubleyAxisChart from './components/chart/DoubleyAxisChart'
import DoubleDirectionBarChart from './components/chart/DoubleDirectionBarChart'
import CylinderChart from './components/chart/CylinderChart'
import SingleColumnChart from './components/chart/SingleColumnChart'
import DoubleBarTimeChart from './components/chart/DoubleBarTimeChart'
import ThreeDBarChart from './components/chart/ThreeDBarChart'
import RateBarChart from './components/chart/RateBarChart'
import NormalText from './components/chart/NormalText'
import DateText from './components/chart/DateText'
import QRcodeChart from './components/chart/QRcodeChart'
import VideoChart from './components/chart/VideoChart'
import RealtimeChart from './components/chart/RealtimeChart'
import ImageChart from './components/chart/ImageChart'
import HyperLinkChart from './components/chart/HyperLinkChart'
import IframeChart from './components/chart/IframeChart'
import RotationChart from './components/chart/RotationChart'
import ColorBlockChart from './components/chart/ColorBlockChart'
import WordCloudChart from './components/chart/WordCloudChart'
import TableChart from './components/chart/TableChart'
import TableRotationChart from './components/chart/TableRotationChart'
import TableTopChart from './components/chart/TableTopChart'
import HandsonTableChart from './components/chart/HandsonTableChart'
import InputChart from './components/chart/InputChart'
import TimeFrameChart from './components/chart/TimeFrameChart'
import TimelineChart from './components/chart/TimelineChart'
import CascadeChart from './components/chart/CascadeChart'
import TabChart from './components/chart/TabChart'
import PieLineChart from './components/chart/PieLineChart'
import BarPieChart from './components/chart/BarPieChart'
import LineBarChart from './components/chart/LineBarChart'
import MapBarChart from './components/chart/MapBarChart'
import MapLineChart from './components/chart/MapLineChart'
import TwinkleBorderChart from '@/views/tool/datav/components/chart/TwinkleBorderChart'
import AroundBorderChart from '@/views/tool/datav/components/chart/AroundBorderChart'
import RayChart from '@/views/tool/datav/components/chart/RayChart'
import DiffuserayChart from '@/views/tool/datav/components/chart/DiffuserayChart'
import MidiKeyboardChart from '@/views/tool/datav/components/chart/MidiKeyboardChart'
import VoiceprintChart from '@/views/tool/datav/components/chart/VoiceprintChart'
import StackedBarChart from './components/chart/StackedBarChart'
import ShadowLineChart from './components/chart/ShadowLineChart'
import RainChart from './components/chart/RainChart'
import PieChart from './components/chart/PieChart'
import RingPieChart from './components/chart/RingPieChart'
import FunnelChart from './components/chart/FunnelChart'
import RadarChart from './components/chart/RadarChart'
import GaugeChart from './components/chart/GaugeChart'
import KeygaugeChart from './components/chart/KeygaugeChart'
import ProgressGaugeChart from '@/views/tool/datav/components/chart/ProgressGaugeChart'
import SelectChart from './components/chart/SelectChart'
import LampText from './components/chart/LampText'
import BackborderChart from './components/chart/BackborderChart'
import MapChart from './components/chart/MapChart'
import MapMoreChart from './components/chart/MapMoreChart'
import ThreeDMapChart from './components/chart/ThreeDMapChart'
import ThreeDMapBarChart from './components/chart/ThreeDMapBarChart'
import WaterBallChart from './components/chart/WaterBallChart'
import WaterBallLineChart from './components/chart/WaterBallLineChart'
import FlopChart from '@/views/tool/datav/components/chart/FlopChart'
import CircleChart from './components/chart/CircleChart'
import PieMoreChart from './components/chart/PieMoreChart'
import ProgressChart from './components/chart/ProgressChart'
import KnowledgeChart from './components/chart/KnowledgeChart'
import PopsChart from './components/chart/PopsChart'
import SunburstChart from './components/chart/SunburstChart'
import TextCheckBox from './components/chart/TextCheckBox'
import CustomChart from '@/views/tool/datav/components/chart/CustomChart'
import CustomWaterBallChart from './components/chart/CustomWaterBallChart'
import ScanningChart from '@/views/tool/datav/components/chart/ScanningChart'
import TurntableChart from '@/views/tool/datav/components/chart/TurntableChart'
import BoxlineChart from '@/views/tool/datav/components/chart/BoxlineChart'
import GalaxyChart from '@/views/tool/datav/components/chart/GalaxyChart'
import TianDiMapChart from '@/views/tool/datav/components/chart/TianDiMapChart'
import DrillDownView from './components/config/drillDown/drillDownView.vue'
import CardChart from '@/views/tool/datav/components/chart/CardChart'
import PictorialBarChart from '@/views/tool/datav/components/chart/PictorialBarChart'
import CustomThreeDBarChart from './components/chart/CustomThreeDBarChart'
import SankeyChart from '@/views/tool/datav/components/chart/SankeyChart'
import TreeLayoutChart from '@/views/tool/datav/components/chart/TreeLayoutChart'
import HeatMapChart from '@/views/tool/datav/components/chart/HeatMapChart'
import InteractChart from '@/views/tool/datav/components/chart/InteractChart'

export default {
  components: {
    BarChart,
    LineChart,
    ScatterChart,
    DoubleBarChart,
    TopBarChart,
    ParalleBarChart,
    DoubleyAxisChart,
    DoubleDirectionBarChart,
    DoubleBarTimeChart,
    CylinderChart,
    SingleColumnChart,
    ThreeDBarChart,
    RateBarChart,
    NormalText,
    DateText,
    TableChart,
    TableRotationChart,
    TableTopChart,
    HandsonTableChart,
    InputChart,
    TimeFrameChart,
    TimelineChart,
    CascadeChart,
    TabChart,
    PieLineChart,
    BarPieChart,
    LineBarChart,
    MapBarChart,
    StackedBarChart,
    StaggeredLabelChart,
    ImageChart,
    QRcodeChart,
    VideoChart,
    RealtimeChart,
    HyperLinkChart,
    IframeChart,
    RotationChart,
    ColorBlockChart,
    WordCloudChart,
    TwinkleBorderChart,
    AroundBorderChart,
    RayChart,
    DiffuserayChart,
    MidiKeyboardChart,
    VoiceprintChart,
    ShadowLineChart,
    RainChart,
    PieChart,
    RingPieChart,
    FunnelChart,
    RadarChart,
    GaugeChart,
    KeygaugeChart,
    ProgressGaugeChart,
    SelectChart,
    LampText,
    BackborderChart,
    MapChart,
    MapLineChart,
    MapMoreChart,
    ThreeDMapBarChart,
    ThreeDMapChart,
    WaterBallChart,
    WaterBallLineChart,
    FlopChart,
    CircleChart,
    PieMoreChart,
    ProgressChart,
    KnowledgeChart,
    PopsChart,
    SunburstChart,
    TextCheckBox,
    CustomChart,
    CustomWaterBallChart,
    ScanningChart,
    TurntableChart,
    BoxlineChart,
    GalaxyChart,
    TianDiMapChart,
    DrillDownView,
    CardChart,
    PictorialBarChart,
    CustomThreeDBarChart,
    SankeyChart,
    TreeLayoutChart,
    HeatMapChart,
    InteractChart
  },
  data() {
    return {
      viewTheme: null,
      viewData: [],
       //屏幕宽高
      screenWidth: document.body.offsetWidth,
      screenHeight: document.body.offsetHeight,
      basePath: process.env.VUE_APP_BASE_API,
      drillDownDialogFlag: false,
      drillDownDialogData: null
    }
  },
  created() {
    //清除loading
    this.$nextTick(() => {
      document.getElementById('appLoading').style.display = 'none';
    })

     let viewData = JSON.parse(localStorage.getItem("viewdata"));
     
     this.viewTheme = viewData.themeForm;
     //获取编辑页宽高
     let rectWidth = this.viewTheme.panelWidth;
     let rectHeight = this.viewTheme.panelHeight;
     //是否自适应
     let isSelfAdaption = this.viewTheme.isSelfAdaption;
     //自适应类型
     let adaptionType = this.viewTheme.adaptionType;

     //是自适应
     if(isSelfAdaption){
       //全自适应
       if(typeof adaptionType == 'undefined' || adaptionType == '0'){
          //遍历组件重新计算自适应宽高
          viewData.drawingList.forEach(item => {
            item.width = (item.width/rectWidth) * this.screenWidth;
            item.height = (item.height/rectHeight) * this.screenHeight;
            item.x = (item.x/rectWidth) * this.screenWidth;
            item.y = (item.y/rectHeight) * this.screenHeight;
          });
       }
       //宽度自适应
       else if(adaptionType == '1'){
         //遍历组件重新计算自适应宽高
          viewData.drawingList.forEach(item => {
            item.width = (item.width/rectWidth) * this.screenWidth;
            item.x = (item.x/rectWidth) * this.screenWidth;
          });
       }
       //高度自适应
       else if(adaptionType == '2'){
          //遍历组件重新计算自适应宽高
          viewData.drawingList.forEach(item => {
            item.height = (item.height/rectHeight) * this.screenHeight;
            item.y = (item.y/rectHeight) * this.screenHeight;
          });
       }
      
       
     }

    this.viewData = viewData.drawingList;

    VueEvent.$on('tabchange',function(chartList){
      if(chartList != null){
          //根据tab标签绑定组件设置组件的显示情况
          for(const obj of this.viewData){
            const chart =  chartList.filter(function (item) {
              return item.customId == obj.customId;
            })[0]

            if(chart != null){
              obj.isShow = chart.isShow;
              //obj.chartOption.animate = chart.animate;
            }
          }
      }          
    }.bind(this))

    //交互组件更新组件配置
    VueEvent.$on('interactChange',function(chartId,act){

        let index = this.viewData.findIndex(item => item.customId == chartId);

        if(index > -1){

          if(this.viewData[index].chartOption.interactData != undefined){
            let chartOption = JSON.parse(JSON.stringify(this.viewData[index].chartOption));
            chartOption.interactData = act;

          }
        
          this.$set(this.viewData[index].chartOption, 'interactData', act);
        }


    }.bind(this))


    //交互组件控制组件显隐
    VueEvent.$on('interactShow',function(chartId,act){

      
        let chart = this.viewData.find(item => item.customId == chartId);
        
        if(chart != null){

           if(act == 'show'){
 
            document.getElementById(chartId).style.visibility = 'visible'
           }else{

            document.getElementById(chartId).style.visibility = 'hidden'
           }
          
        }

    }.bind(this))


  },
  computed: {
    canvasStyle() {
      //let background = this.viewTheme.bgImage != '' ? `url(${this.viewTheme.bgImage}) no-repeat` : this.viewTheme.bgColor
      let background = this.viewTheme.bgImage != '' ? `url(${this.basePath + this.viewTheme.bgImage}) no-repeat` : this.viewTheme.bgColor
      return {
        width: this.viewTheme.isSelfAdaption?this.screenWidth+"px":this.viewTheme.panelWidth + "px",
        height: this.viewTheme.isSelfAdaption?this.screenHeight+"px":this.viewTheme.panelHeight + "px",
        background: background,
        // width: "100%",
        // height: "100%",
        // background: this.viewTheme.bgColor,
      };
    },
  },
  mounted: function () {
    Watermark.set("FusionView");
    //监听下钻事件
    VueEvent.$on("drill_down_msg", data=>{
      this.drillDownDialogData = data;
      this.drillDownDialogFlag = true;
    })
  },
  methods: {
    chartStyle(val) {
      return {
          //transform: translate(val.x + "px", val.y + "px"),
          left: val.x + "px",
          top: val.y + "px",
          width: val.width + "px",
          height: val.height + "px",
          position: 'absolute',
          'z-index': val.zindex
      }
    },
  },
};
</script>

<style>
</style>